<template>
  <div class="animationUp">
    <div class="pop_box" v-if="pop">
      <!-- 弹窗背景 -->
      <div class="boxInfo">
        <ul>
          <li v-for="(item, index) in stor" :key="index">
            <div class="box_text">
              <span>{{ item.skinDetailName }}</span>
            </div>
            <div class="boxBg">
              <img :src="item.skinDetailImage" />
            </div>
            <div class="btnClass">
              <div>取回</div>
              <div>回收</div>
            </div>
          </li>
        </ul>
        <div class="btn_info">
          <div @click="deletes(1)">全部放入背包</div>
          <div @click="deletes(2)">全部回收</div>
        </div>
      </div>
    </div>
    <div class="clie">
      <div class="prepare">
        <div class="preBg">
          <img :src="goodsBg" class="imgBg" />
          <img :src="gun" class="gun" />
        </div>
      </div>
      <div class="btn_list">
        <div
          class="itemNum"
          v-for="(item, index) in listBtn"
          :key="item"
          @click="clickBtn(index)"
        >
          x{{ item }}
        </div>
      </div>
      <div class="openbtn" @click="start">
        <img src="../assets/images/prices.png" />
        <img src="" />
        <span>{{ moneyAll }}</span
        >&nbsp;
        <span>打开</span>
      </div>
    </div>
    <div class="dongs" v-if="sceeen">
      <div class="ddd">
        <Laofuji ref="mychild" :list="slots1" :positions="position"></Laofuji>
        <div class="centerline"><span></span><span></span></div>
      </div>
      <div class="circle-bj">
        <img class="img_icon" src="../assets/images/1.png" />
      </div>
    </div>
    <!-- <Laofuji ref="mychild" :list="slots1" :positions="position"></Laofuji> -->

    <div class="model-list">
      <div class="model-splice">
        <div
          class="itemIn"
          @click="getlist(1)"
          :class="{ gactse01: gactse == 1 }"
        >
          物品列表
        </div>
        <div
          class="itemIn"
          @click="getlist(2)"
          :class="{ gactse01: gactse == 2 }"
        >
          最近掉落
        </div>
        <div class="model-list-cent">
          <div></div>
        </div>
      </div>
      <div class="list_gunList">
        <div class="gun_goods">
          <div class="probability">
            <div class="goodse">
              <div class="rectangle01"></div>
              <div class="oneRect01">30%</div>
            </div>
            <div class="goodse">
              <div class="rectangle02"></div>
              <div class="oneRect02">10%</div>
            </div>
            <div class="goodse">
              <div class="rectangle03"></div>
              <div class="oneRect03">60%</div>
            </div>
          </div>
        </div>
        <ul v-if="aclist == 1" class="list_goods">
          <li class="item" v-for="(item, index) in details" :key="index">
            <img :src="item.skinDetails.image" class="img_gun" />
            <div class="parginBg">
              <div class="bel_save">{{ item.skinDetails.skinName }}</div>
              <div class="bel_text">
                <img
                  style="margin-left: 10px"
                  src="../assets/images/money.png"
                />&nbsp;&nbsp;<span>{{ item.skinDetails.price }}</span>
              </div>
            </div>
          </li>
        </ul>

        <div class="historylist" v-if="aclist == 2">
          <ul>
            <li v-for="(item, index) in historylist" :key="index">
              <!-- <div>{{ item.createTime }}</div> -->
              <div class="list_left">
                <img :src="item.userImage" />
                <div>{{ item.price }}</div>
              </div>
              <div class="list_right">{{ item.skinName }}</div>

              <!-- <div>
                <div><img :src="item.skinImage" /></div>
                {{ item.skinName }}
              </div>
              <div>{{ item.price }}</div> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { instUil, details, opens, history } from "../api/iosBuax";
import Laofuji from "../components/laofuji.vue";

export default {
  components: {
    Laofuji,
  },
  data() {
    return {
      listBtn: [1, 2, 3, 4, 5],
      goods: "",
      goodsBg: "",
      money: 0,
      moneyAll: 0,
      gun: "",
      gactse: 1,
      rule: [],
      pageNum: 1,
      slots1: [],
      id: "",
      activs: 1,
      position: 10,
      sceeen: false,
      aclist: 1,
      details: [],
      historylist: [],
      pageNum: 1,
      pageSize: 10,
      pop: false,
      stor: [],
    };
  },
  methods: {
    deletes(index){
      if(index==1){
        this.pop = false
      }
    },
    clickBtn(e) {
      this.activs = e + 1;
      this.moneyAll = this.money * (e + 1);
    },
    start() {
      let k = this.activs;
      this.sceeen = true;
      this.getopen_list(k);
    },
    async getopen_list(k) {
      var that = this;
      let savey = {
        boxId: this.id,
        num: k,
      };
      console.log(savey.boxId, savey.num + "///////////");
      let r = await opens(savey);
      this.position = r.data.resultId;
      this.slots1 = r.data.boxGoodsList;
      this.stor = r.data.storehouseList;
      console.log(this.slots1, this.position);

      setTimeout(function () {
        that.$refs.mychild.childFun();
        var ds = that.$store.state.Max;
        var thats = that;

        setTimeout(function () {
          thats.sceeen = false;
          thats.pop = true;
        }, ds);
      }, 100);
    },
    getlist(k) {
      this.gactse = k;
      this.aclist = k;
      this.pageNum = 1;
      this.pageSize = 10;
      console.log(this.gactse);
      if (k == 1) {
      } else {
        this.get_history(k);
      }
    },
    async get_history(e) {
      let save = {
        id: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let r = await history(save);
      if (this.pageNum <= r.data.totalPages) {
        this.historylist = this.historylist.concat(r.data.content);
      }
      console.log(r);
    },
    async get_details(id) {
      let saveme = {
        id: id,
        pageNum: this.pageNum,
        pageSize: 20,
      };
      let s = await details(saveme);
      this.details = this.details.concat(s.data.blindBoxDetailsList.content);
      this.rule = JSON.parse(s.data.rule);
    },
  },
  async mounted() {
    let id = {
      id: this.$route.query.id,
    };
    let e = await instUil(id);
    this.get_details(id.id);
    this.id = id.id;
    console.log(this.rule + "+++++++");
    this.goodsBg = e.data.backgroundImage;
    this.money = e.data.price;
    this.moneyAll = e.data.price;
    this.gun = e.data.image;
  },
};
</script>

<style lang="less" scoped>
.animationUp {
  width: 100%;
  .clie {
    background-image: url(../assets/images/midBg.png);
    background-size: 100% 100%;
    height: 660px;
    .prepare {
      margin: 0 auto;
      width: 469px;
      height: 440px;
      background-image: url(../assets/images/mh_bg02.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .preBg {
        width: 368px;
        height: 368px;
        background-image: url(../assets/images/mh_bg01.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .imgBg {
          width: 276px;
          height: 265px;
          position: absolute;
          left: 54%;
          top: 50%;

          transform: translate(-50%, -50%);
        }
        .gun {
          width: 70%;
          z-index: 2;
        }
      }
    }
    .btn_list {
      width: 70%;
      height: 48px;
      display: flex;
      margin: 0 auto;
      .itemNum {
        background: #016a9e;
        opacity: 0.7;
        width: 91px;
        border-radius: 50%;
        font-size: 21px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 8px;
        flex: 1;
      }
      .itemNum:hover {
        background: #038fc9;
      }
    }
    .openbtn {
      margin: 50px auto 0;
      width: 312px;
      height: 64px;
      background: #038fc9;
      font-size: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffa32a;
      img {
        width: 23px;
        height: 24px;
      }
      span {
        font-size: 28px;
        color: #fff;
        font-family: Adobe Heiti Std;
        font-weight: bold;
      }
    }
  }
  .dongs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../assets/images/bg_cope.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 9999;
    .circle-bj {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-size: 100%;
      z-index: 99999999;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -20px;
    }

    .centerline {
      position: absolute;
      width: 2px;
      height: 100%;
      left: 50%;
      margin-left: -1px;
      bottom: 0;
      background-color: #59c2fe;
      z-index: 999999;
    }
  }
  .model-list {
    width: 100%;
    height: 59px;
    background: #222833;
    .model-splice {
      width: 100%;
      height: 59px;
      display: flex;
      color: #fff;
      .itemIn {
        padding: 17px 28px;
        font-size: 24px;
      }
    }
    .gun_goods {
      width: 100%;
      .probability {
        display: flex;
        align-items: center;
        width: 280px;
        height: 100px;
        float: right;
      }
      .goodse {
        width: 90px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        font-size: 20px;
        font-family: Microsoft YaHei;

        .rectangle01 {
          width: 7px;
          height: 21px;
          background: #7d3c24;
        }
        .rectangle02 {
          width: 7px;
          height: 21px;
          background: #69267e;
        }
        .rectangle03 {
          width: 7px;
          height: 21px;
          background: #2a5084;
        }
        .oneRect01 {
          color: #7d3c24;
        }
        .oneRect02 {
          color: #69267e;
        }
        .oneRect03 {
          color: #2a5084;
        }
      }
    }
  }
  .list_goods {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-evenly;
    background: #141a28;
    margin-top: 50px;
    li {
      width: 327px;
      height: 231px;
      background: radial-gradient(circle, #b4b8bb, #3b3f43);
      margin-bottom: 50px;
      position: relative;
      .img_gun {
        position: absolute;
        left: 50%;
        top: 36%;
        transform: translate(-50%, -50%);
        width: 250px;
      }
      .parginBg {
        width: 100%;
        position: absolute;
        color: #fff;
        bottom: 0;
        img {
          width: 28px;
          height: 28px;
        }
        .bel_save {
          line-height: 40px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #ffffff;
          margin-left: 10px;
        }
        .bel_text {
          line-height: 50px;
          width: 100%;
          background-image: url(../assets/images/juxing.png);
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffa32a;
        }
      }
    }
  }
}
.gactse01 {
  color: #ffa22a;
  border-bottom: 5px solid #ffa22a;
}
.list_gunList {
  width: 100%;
  height: 200px;
  background: #141a28;
  .historylist {
    width: 100%;
    ul {
      li {
        width: 100%;
        height: 108px;
        background-color: #1f3342;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .list_left {
          width: 200px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-left: 20px;
          div {
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffa22a;
          }
        }
        .list_right {
          font-size: 22px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          margin-right: 20px;
        }
      }
      li:nth-child(2n) {
        background: #1a2530;
      }
      li img {
        width: 84px;
        height: 84px;
      }
    }
  }
}
.pop_box {
  height: 300vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100vh;
  background: url(../assets/images/bg_cope.png) no-repeat;
  background-size: 100% 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  .boxInfo {
    width: 100%;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        max-width: 30%;
        margin:20px 0;
        .boxBg {
          background: url(../assets/images/box4.png) no-repeat;
          background-size: 100% 100%;
          img {
            width: 100%;
          }
        }
        .box_text {
          width: 100%;
          color: #fff;
          display: flex;
          justify-content: center;
          span {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .btnClass{
          width:100%;
          display: flex;
          justify-content: space-between;
          div{
            width:48%;
            font-size:12px;
            background:#8A5E10;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            color:#fff;
          }
        }
      }
    }
    .btn_info{
      width:100%;
      margin-top:80px;
      display: flex;
      justify-content: space-around;
      div{
        width:46%;
        height:.8rem;
        background:#079c96;
        display: flex;
        justify-content: center;
        align-items: center;
        color:#ffffff;
            font-family: Adobe Heiti Std;
            font-weight: normal;

      }
    }
  }
}
</style>
